<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.js"></script>
  <script src="js/china.js"></script>
</head>

<body>
<div id="main" style="width: 368px;height: 440px;"></div>
<script>
  var myChart=echarts.init(document.getElementById("main"));
  option = {
    legend: {},
    tooltip: {
      trigger: 'axis',
      showContent: false
    },
    dataset: {
      source: [
        ['product', '2020', '2021', '2022', '2023', '2024', '2025'],
        ['第一季度', 205244.8,249200.2, 271509.2, 284996.6, 303381.5,  322700.9],
        ['第二季度', 248347.7, 282849.2, 293919.5,308037.6,325940.1,  344067.1],
        ['第三季度', 264355.7, 291288.1, 309270.6, 319992.3, 339566.5, 356382.9],
        ['第四季度', 295618.8, 325899.4, 335507.9, 352360.9,  371778.5, 389016.8]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: {
      top: '55%' ,
      left: "17%",
    },
    series: [
      {
        type: 'bar',
        stack:'总量',
        smooth: true,
        symbolSize: 10,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'bar',
        stack:'总量',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'bar',
        stack:'总量',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'bar',
        stack:'总量',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'pie',
        id: 'pie',
        radius: [40,70],
        center: ['50%', '25%'],
        emphasis: {
          focus: 'self'
        },
        label: {
          position:"outside",
          formatter: '{b}:\n {@2020} ({d}%)'
        },
        encode: {
          itemName: 'product',
          value: '2020',
          tooltip: '2020'
        }
      }
    ]
  };
  myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{b}: \n {@[' + dimension + ']} ({d}%)'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });
  myChart.setOption(option);
</script>
</body>
</html>
